<template>
  <div class="composition-container">
    <div class="item">
      <div id="dma-leakage-composition-chart" :style="getAvailableHeight"></div>
    </div>

    <div class="item">
      <div :style="getAvailableHeight">
        <div style="height: 20%;display: flex;">
          <div class="box" style="width: 50%;padding-top: 4%;">
            <div>漏失流量</div>
            <div>{{ dmaLeakageComposition ? dmaLeakageComposition.lostFlow : 0 }} m³/h</div>
          </div>
          <div class="box" style="width: 50%;padding-top: 4%;">
            <div>总漏失孔径预估</div>
            <div>{{ dmaLeakageComposition ? dmaLeakageComposition.leakageAperture : 0 }} mm</div>
          </div>
        </div>

        <div style="height: 20%;display: flex;">
          <div class="box" style="width: 100%;padding-top: 4%;">
            <div>漏损流量</div>
            <div>
              {{ dmaLeakageComposition ? dmaLeakageComposition.leakageFlow : 0 }} m³
            </div>
          </div>
        </div>

        <div style="height: 60%;display: flex;">
          <div class="box" style="width: 50%;height: 100%;padding-top: 20%;">
            <div>物理漏失量(真实漏损量)</div>
            <div>
              {{ dmaLeakageComposition ? dmaLeakageComposition.physicalLeakageFlow : 0 }} m³
            </div>
          </div>
          <div style="width: 50%;">
            <div class="box" style="height: calc(100% / 3);padding-top: 8%;">
              <div>可控管网漏失量</div>
              <div>
                {{ dmaLeakageComposition ? dmaLeakageComposition.controllableNetLeakageFlow : 0 }} m³
              </div>
            </div>
            <div class="box" style="height: calc(100% / 3);padding-top: 8%;">
              <div>背景漏失水量</div>
              <div>
                {{ dmaLeakageComposition ? dmaLeakageComposition.backgroundLeakageFlow : 0 }} m³
              </div>
            </div>
            <div class="box" style="height: calc(100% / 3);padding-top: 8%;">
              <div>水箱/水池的漏损和溢流水量</div>
              <div>
                {{ dmaLeakageComposition ? dmaLeakageComposition.tankLeakageFlow : 0 }} m³
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import * as echarts from "echarts";

require('echarts/theme/macarons') // echarts theme

export default {
  name: 'DmaLeakageComposition',
  data() {
    return {
      screenHeight: null,
      dmaLeakageComposition: null,
      dmaLeakageCompositionChart: undefined,
      baseOption: {
        legend: {
          data: ['供水量 m³', '环比 %']
        },
        grid: {
          top: '6%',
          right: '8%',
          bottom: '5%',
          left: '8%',
          containsLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        xAxis: {
          type: 'category',
          data: [],
        },
        yAxis: [{
          type: 'value',
          axisLine: {
            show: true,
          },
          axisLabel: {
            formatter: '{value} m³'
          }
        }, {
          type: 'value',
          axisLine: {
            show: true,
          },
          axisLabel: {
            formatter: '{value} %'
          }
        }],
        series: [
          {
            name: '供水量 m³',
            data: [],
            type: 'bar',
            lineStyle: {
              color: '#fa553a'
            }
          },
          {
            name: '环比 %',
            data: [],
            type: 'line',
            smooth: true,
            lineStyle: {
              color: '#12b972'
            },
            yAxisIndex: 1
          },
        ]
      },
    }
  },
  methods: {
    initChart() {
      this.dmaLeakageCompositionChart = echarts.init(document.getElementById('dma-leakage-composition-chart'), 'macarons')
      this.dmaLeakageCompositionChart.setOption(this.baseOption)
    },
    resizeCharts(height) {
      this.screenHeight = height
      this.$nextTick(() => {
        this.dmaLeakageCompositionChart.resize()
      })
    },
    updateData(values) {
      const data1 = values[0].data

      const option = Object.assign({}, this.baseOption)
      option.xAxis.data = data1.timeList
      option.series[0].data = data1.supply
      option.series[1].data = data1.hb
      this.dmaLeakageCompositionChart.setOption(option)

      this.dmaLeakageComposition = values[1].data
    }
  },
  computed: {
    getAvailableHeight() {
      const h = this.screenHeight - 528
      return {width: '100%', height: h + 'px'}
    },
  },
  created() {
    this.screenHeight = document.body.clientHeight
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  }
}
</script>

<style scoped lang="scss">
.composition-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 10px;

  .item {
    &:first-child {
      width: 64%;
    }

    &:last-child {
      width: calc(36% - 10px);
      margin-left: 10px;
    }

    .box {
      border: 1px solid #E3E3E3;
      text-align: center;
      vertical-align: center;

      div:first-child {
        margin-bottom: 5px;
      }

      div:last-child {
        color: #1890ff;
        display: flex;
        justify-content: center;
        padding: 0 20px;
      }
    }
  }
}
</style>
